<template>
	<view class="container">
		<view class="searchMainAre topFixed">
			<search :isMessage="isMessage" :isSearch="isSearch" :messageNum="messageNum" @messageClick="messageClick"></search>
		</view>
		<view class="swiperBoxAre">
			<view class="navBg"></view>
			<view class="calc swiperItemBox">
				<swiperAre class="swiper" :isBorder="true" :imgList="imgList" :isBanner="true" :height="height"  @imgBtn="imgBtn"></swiperAre>
			</view>
		</view>
		<view class="display flow calc classifyAre">
			<view class="display column classifyItemAre fontHide" v-for="(item,index) in classifyList" :key="index" @click="classClick(item)">
				<image :src="item.head_img"></image>
				<text>{{item.class_name}}</text>
			</view>
		</view>
		<!-- <recommend @goodsClick="goodsClick" class="recommend"></recommend> -->
		<!-- <view class="lineColor line"></view> -->
		<allGoodsAre :isFilter="isFilter" :goodsList="goodsList" @goodsClick="goodsClick" @filterChange="filterChange" ref='allGoodsAre' class="goodsAre" v-if="isHavaData" @clickLoadMore="clickLoadMore" @loadMoreListener="loadMoreListener"></allGoodsAre>
		<noData :noDataType="noDataType" v-else></noData>
		<goTop :isTop="isTop"></goTop>
		<uni-popup ref="showtip" :mask-click="false" :type="popType" @change="change">
			<loginPop class="pop" @cancel="cancel"></loginPop>
		</uni-popup>
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @change="change">
			<integral :integralList="integralList"></integral>
		</uni-transition>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import {mapState} from 'vuex'
	import common from "@/common/common.js"
	import search from "@/components/search.vue"
	import swiperAre from "@/components/swiperAre.vue"
	import recommend from "@/components/recommend.vue"
	import allGoodsAre from "@/components/allGoodsAre.vue"
	import goTop from "@/components/goTop.vue"
	import loginPop from '@/components/loginPop.vue'
	import noData from '@/components/noData.vue'
	import integral from '@/components/integral/integral.vue'
	export default {
		components: {swiperAre,recommend,allGoodsAre,goTop,search,loginPop,noData,integral},
		data() {
			return {
				title: 'Hello',
				isTop: false,
				isMessage: true,
				isSearch: false,
				searchTxt: '',
				imgList: [],
				height: '350rpx',
				classifyList:[],
				classifyAll: {class_name: '全部',head_img: '/static/images/icon/all.png'},
				navList: [],
				isFilter: true,
				goodsList: [],
				page: 1,
				isFail: false,
				sortType: 5,
				isHavaData : true,
				noDataType: 'goods',
				popType: '',
				messageNum: 0,
				pageIndex: 1,
				transShow: false,
				integralList: {},
			}
		},
		computed: {
			...mapState(['hasLogin','transfromClass','modeClass'])
		},
		watch:{
			async hasLogin(newVal){
				if(newVal){
					this.getUnread()
					this.integralList = await common.setIntegral(this.$store.state.userId,1,1)
					if(this.integralList){
						this.transShow = true
						this.transShow = await common.integralAni()
					}
				}
			}
		},
		onLoad(options) {
			this.getBanner()
			this.getClassData()
			this.getData()
			this.getUnread()
		},
		onShow() {
			this.getBanner()
			this.getClassData()
			this.getUnread()
			this.getData()
		},
		methods: {
			getBanner(){
				util.getAjax(this.global.apiUrl + '/get_banner_list',(res)=>{
					console.log(res)
					if(res.data.length != 0){
						this.imgList = res.data
					}else{
						this.imgList = []
					}
				},{class_type: 1})
			},
			getClassData(){
				//获取分类
				util.getAjax(this.global.apiUrl + '/get_one_product_class_five',(res)=>{
					// console.log(res)
					if(res.data.length != 0){
						this.classifyList = res.data.concat(this.classifyAll)
					}else{
						this.classifyList = this.classifyAll
					}
				})
			},
			getUnread(){
				// console.log(this.hasLogin);
				if(this.hasLogin){
					util.getAjax(this.global.apiUrl + '/get_email_zero',(res)=>{
						// console.log(res);
						if(res.data){
							this.messageNum = res.data
						}else{
							this.messageNum = 0
						}
					},{user_id: this.$store.state.userId})
				}
			},
			getData(){
				var that = this
				util.getAjax(that.global.apiUrl + '/get_supplier_product_tj_all',that.getShopData,{p: that.page,num: util.number,type: that.sortType},that.shopDataErr)
			},
			getShopData(res){
				console.log(res)
				var that = this
			    if(res.data.list.length != 0){
					var list = []
					if(that.page == 1) {
						list = res.data.list
					} else {
						if(that.pageIndex != that.page){
							list = that.goodsList.concat(res.data.list)
						}else{
							list = that.goodsList
						}
					}
					that.pageIndex = that.page
					that.goodsList = list
					that.isHavaData = true
					that.$refs.allGoodsAre.$refs.loadMore.loadMoreComplete(res.data,'goods')
			    }else{
					that.goodsList = []
					that.isHavaData = false
			    }
			    
			},
			//获取商品数据异常
			shopDataErr(err){
			    if(this.page>1){
					this.$refs.allGoodsAre.$refs.loadMore.loadMoreFail()
			    }else{
					util.showModal('提示','获取商品失败，请向上滑动屏幕')
					this.isFail = true
			    }
			},
			loadMoreListener(){
				this.page += 1;
				this.getData()
			},
			clickLoadMore(){
				this.getData()
			},
			filterChange(sortType){
				this.sortType = sortType
				this.page = 1
				this.getData()
			},
			goodsClick(id){
				// if(this.hasLogin){
					
				// }else{
				// 	this.togglePopup('center','tip')
				// }
				uni.navigateTo({
					url: '/subPackages/goods/goodsDetails/goodsDetails?id=' + id
				})
			},
			classClick(item){
				if(item.class_name === '全部'){
					this.global.classid = ''
					uni.switchTab({
						url: '/pages/allCategories/allCategories'
					})
				}else{
					this.global.classid = item.id
					uni.switchTab({
						url: '/pages/allCategories/allCategories'
					})
				}
			},
			togglePopup(type,open) {
				this.popType = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type){
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log(e);
			},
			imgBtn(list,index){
			    common.imgBtn(list,index,'index')
			},
			messageClick(){
				if(this.hasLogin){
					uni.navigateTo({
						url: '/subPackages/mine/messageAre/messageAre'
					})
				}else{
					this.togglePopup('center','tip')
				}
			}
		},
		// 获取滚动条当前位置
		onPageScroll(e) {
			e.scrollTop > 600?this.isTop=true: this.isTop=false
		},
		onReachBottom: function () {
			if(this.isHavaData){
				if(this.isFail){
				  this.getData()
				  return
				}
				this.$refs.allGoodsAre.$refs.loadMore.loadMore()
			}
		},
		onPullDownRefresh: function () {
		    var that = this
		    that.getBanner()
		    that.getClassData()
			that.getUnread()
			that.page = 1
		    that.getData()
		    uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			
		}
	}
	
</script>

<style lang="scss">
	// .box {
	// 	color: #fff;
	// 	width: 100px;
	// 	height: 100px;
	// 	line-height: 100px;
	// 	text-align: center;
	// 	background-color: #4CD964;
	// }
	.swiperBoxAre{
		@include width;
		position: relative;
		.swiperItemBox{
			@include margin(80rpx,'top');
		}
	}
	.searchMainAre,.swiper,.recommend,.goodsAre{
		@include width;
	}
	
	.classifyAre{
		// width: calc(100% - 40rpx);
		height: 200rpx;
		@include borderR(10rpx);
		@include margin(20rpx,'top');
		@include padding(0 10rpx);
		@include justify-content('s');
		.classifyItemAre{
			@include flex-align-justify;
			@include margin(0 10rpx);
			@include font($fontSize - 2rpx);
			image{
				@include widthHeight(90rpx);
				@include margin(15rpx,'bottom');
			}
		}
		
	}
	.line{
		@include width;
		height: 20rpx;
	}
	.noDataAre{
		@include margin(40rpx 0);
	}
</style>
